<template>
  <h1>{{ success }}</h1>
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'

interface Student {
  name: string
  class: string
  age: number
}

const Component = defineComponent({
  props: {
    success: {type: String},
    callback: {
      type: Function as PropType<() => void>
    },
    student: {
      type: Object as PropType<Student>,
      required: true
    }
  },

  setup() {
    const year = ref(2020)
    const month = ref<string | number>('9')
    month.value = 9 // OK
    const result = year.value.split('') // => Property 'split' does not exist on type 'number'
  },
  data() {
    return {
      message: 'Vue3 code style'
    }
  },
  computed: {
    reversedMessage(): string {
      return this.message.split(' ').reverse().join('')
    }
  }
})
</script>
